<script lang="ts" setup>
import Top from '@/components/Top/Top.vue';
import { getImgToken } from '@/services/review';
import { useMemberStore } from '@/stores/modules/member';
import { onShow } from '@dcloudio/uni-app';

import { onMounted, ref } from 'vue';
onMounted(async () => {
  // 小程序分享函数
  // #ifdef MP-WEIXIN
  uni.showShareMenu<{
    withShareTicket: true;
    menus: ('shareAppMessage' | 'shareTimeline')[];
  }>({
    withShareTicket: true,
    menus: ['shareAppMessage', 'shareTimeline'],
  });
  // #endif
});
// 切换页面时，获取七牛云token
onShow(async () => {
  // 获取sessionId
  const session = useMemberStore().getProfile()!;
  const imgToken = (await getImgToken()).data.token;
  if (imgToken) {
    useMemberStore().setProfile({
      ...session,
      imgToken,
    });
  }
});
const menuList = ref([
  {
    name: '热食和冷食',
    pathName: 'reShiHeLengShi',
    img: '../../static/images/Temperature.png',
  },
  {
    name: '食物冷却',
    pathName: 'shiWuLengQue',
    img: '../../static/images/Cooling.png',
  },
  {
    name: '温度计校准',
    pathName: 'wenDuJiJiaoZhun',
    img: '../../static/images/Thermometer.png',
  },
  {
    name: '添加剂使用',
    pathName: 'tianJiaJiShiYong',
    img: '../../static/images/Usage.png',
  },
  {
    name: '食品留样',
    pathName: 'shiPinLiuYang',
    img: '../../static/images/Sampling.png',
  },
  {
    name: '添加剂清单',
    pathName: 'tianJiaJiQingDan',
    img: '../../static/images/List.png',
  },
  {
    name: '时间控制',
    pathName: 'shiJianKongZhi',
    img: '../../static/images/Control.png',
  },
  {
    name: '消毒液更换',
    pathName: 'xiaoDuYeGengHuan',
    img: '../../static/images/Changing.png',
  },
  {
    name: '紫外线灯',
    pathName: 'ziWaiDeng',
    img: '../../static/images/Light.png',
  },
  {
    name: '果蔬消毒',
    pathName: 'guoShuXiaoDu',
    img: '../../static/images/Sanitizing.png',
  },
  // {
  //   name: '每日品尝测试',
  //   pathName: 'tastePanel',
  //   img: '../../static/images/share.png',
  // },
  {
    name: '冰箱记录',
    pathName: 'refrigeratorTable',
    img: '../../static/images/refrigerator.png',
  },
]);
</script>

<template>
  <Top />
  <view>
    <view class="itemList">
      <view class="grid h-56 grid-cols-3 gap-6 justify-items-center">
        <view
          v-for="item in menuList"
          :key="item.name"
          class="w-20 h-20 border-2 border-solid rounded-lg shadow-lg border-slate-200"
        >
          <navigator
            class="text-center"
            :url="`/pages/writePages/${item.pathName}/${item.pathName}?value=newTable`"
            open-type="navigate"
            hover-class="navigator-hover"
          >
            <image
              class="inline-block w-10 h-10 mt-3"
              mode="scaleToFill"
              :src="item.img"
            >
            </image>
            <text class="inline-block text-xs text-black">{{ item.name }}</text>
          </navigator>
        </view>
      </view>
    </view>
  </view>
</template>

<style lang="scss" scoped>
.boder {
  position: relative;
  width: 90%;
  height: calc(80vh - var(--window-bottom));
  border: solid 1px #dcdcdc;
  box-shadow: 0 0 5px rgba($color: #d8d8d8, $alpha: 0.5);
  margin: 0 auto;
  .itemList {
    position: relative;
    margin-top: 5%;
  }
}
</style>
